<template>
  <div class="page-container">
    <div class="page-content">
      <!-- 统计搜索条件栏 -->
      <a-card class="stats-search-card">
        <div class="stats-search-form">
          <a-form layout="inline" :model="statsSearchForm">
            <a-form-item label="来源类型" required>
              <a-select
                v-model:value="statsSearchForm.sourceType"
                placeholder="请选择来源类型"
                style="width: 150px"
                @change="handleStatsSearch"
              >
                <a-select-option value="post">帖子</a-select-option>
                <a-select-option value="idle">闲置物品</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="时间范围">
              <a-range-picker
                v-model:value="statsSearchForm.timeRange"
                style="width: 280px"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                @change="handleStatsSearch"
              />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="handleStatsSearch" :loading="statsLoading">
                <SearchOutlined />
                查询统计
              </a-button>
              <a-button style="margin-left: 8px" @click="handleStatsReset">重置</a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-card>

      <!-- 数据统计卡片 -->
      <div class="stats-cards">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ statistics.commentCount || 0 }}</div>
                <div class="stat-label">总评论数</div>
                <div class="stat-icon total">
                  <MessageOutlined />
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ statistics.replyCount || 0 }}</div>
                <div class="stat-label">回复总数</div>
                <div class="stat-icon reply">
                  <SwapOutlined />
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ statistics.commentRiskCount || 0 }}</div>
                <div class="stat-label">风险评论</div>
                <div class="stat-icon risk">
                  <ExclamationCircleOutlined />
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ formatGrowthRate(statistics.growthRate) }}</div>
                <div class="stat-label">增长率</div>
                <div class="stat-icon growth">
                  <RiseOutlined />
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>

      <!-- 评论管理表格 -->
      <a-card>
        <!-- 搜索表单 -->
        <div class="search-form">
          <a-form layout="inline" :model="searchForm">
            <a-form-item label="评论内容">
              <a-input
                v-model:value="searchForm.content"
                placeholder="请输入评论内容关键字"
                style="width: 200px"
                allow-clear
                @pressEnter="handleSearch"
              />
            </a-form-item>
            <a-form-item label="来源类型">
              <a-select
                v-model:value="searchForm.sourceType"
                placeholder="请选择来源类型"
                style="width: 150px"
                allow-clear
              >
                <a-select-option value="post">帖子</a-select-option>
                <a-select-option value="idle">闲置物品</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="评论状态">
              <a-select
                v-model:value="searchForm.commentStatus"
                placeholder="请选择评论状态"
                style="width: 150px"
                allow-clear
              >
                <a-select-option value="published">已发布</a-select-option>
                <a-select-option value="hidden">已隐藏</a-select-option>
                <a-select-option value="deleted">已删除</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="匿名状态">
              <a-select
                v-model:value="searchForm.isAnonymous"
                placeholder="请选择匿名状态"
                style="width: 120px"
                allow-clear
              >
                <a-select-option :value="1">匿名</a-select-option>
                <a-select-option :value="0">实名</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="隐藏状态">
              <a-select
                v-model:value="searchForm.isHidden"
                placeholder="请选择隐藏状态"
                style="width: 120px"
                allow-clear
              >
                <a-select-option :value="1">已隐藏</a-select-option>
                <a-select-option :value="0">未隐藏</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="handleSearch">
                <SearchOutlined />
                查询
              </a-button>
              <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
            </a-form-item>
          </a-form>
        </div>

        <!-- 表格 -->
        <a-table
          :columns="columns"
          :data-source="tableData"
          :loading="loading"
          :pagination="pagination"
          row-key="id"
          :scroll="{ x: 1600 }"
          @change="handleTableChange"
        >
          <!-- 评论内容 -->
          <template #commentContent="{ record }">
            <div class="comment-content-cell">
              <div v-if="record.parentId" class="reply-comment">
                <!-- 回复关系 -->
                <div class="reply-header">
                  {{ getCommenterName(record) }} 回复 @{{ record.replyer || '未知用户' }}
                </div>
                <!-- 回复内容 -->
                <div
                  class="reply-content"
                  :title="record.content.length > 80 ? record.content : undefined"
                >
                  {{
                    record.content.length > 80
                      ? record.content.substring(0, 80) + '...'
                      : record.content
                  }}
                </div>
              </div>
              <div v-else class="normal-comment">
                <!-- 一级评论内容 -->
                <div
                  class="comment-text"
                  :title="record.content.length > 80 ? record.content : undefined"
                >
                  {{
                    record.content.length > 80
                      ? record.content.substring(0, 80) + '...'
                      : record.content
                  }}
                </div>
              </div>
            </div>
          </template>

          <!-- 评论者信息 -->
          <template #commenter="{ record }">
            <div class="commenter-name">
              {{ getCommenterName(record) }}
            </div>
          </template>

          <!-- 身份状态 -->
          <template #identity="{ record }">
            <a-tag :color="record.isAnonymous === 1 ? 'orange' : 'blue'" size="small">
              {{ record.isAnonymous === 1 ? '匿名发布' : '实名发布' }}
            </a-tag>
          </template>

          <!-- 关联来源 -->
          <template #relatedSource="{ record }">
            <div class="related-source">
              <div class="source-title">
                <a @click="handleViewPostTree(record)" class="source-link">
                  {{ getSourceTitle(record) }}
                </a>
              </div>
              <div class="source-type">
                <a-tag :color="record.sourceType === 'post' ? 'blue' : 'green'" size="small">
                  {{ record.sourceType === 'post' ? '帖子' : '闲置物品' }}
                </a-tag>
              </div>
            </div>
          </template>

          <!-- 评论状态 -->
          <template #commentStatus="{ record }">
            <a-space direction="vertical" size="small">
              <a-tag :color="getStatusColor(record.commentStatus)">
                <component :is="getStatusIcon(record.commentStatus)" />
                {{ getStatusText(record.commentStatus) }}
              </a-tag>
              <a-tag v-if="record.isHidden === 1" color="red" size="small">
                <EyeInvisibleOutlined />
                已隐藏
              </a-tag>
            </a-space>
          </template>

          <!-- 互动统计 -->
          <template #interaction="{ record }">
            <div class="interaction-stats">
              <div class="stat-item">
                <LikeOutlined />
                <span>{{ record.likeCount }}</span>
              </div>
              <div v-if="record.replyCount > 0" class="stat-item">
                <MessageOutlined />
                <span>{{ record.replyCount }}</span>
              </div>
            </div>
          </template>

          <!-- 操作列 -->
          <template #action="{ record }">
            <div class="action-buttons">
              <PermissionButton permission="circle:comment:detail">
                <a-button
                  type="link"
                  size="small"
                  @click="handleViewDetail(record)"
                  class="action-btn"
                >
                  <EyeOutlined />
                </a-button>
              </PermissionButton>

              <PermissionButton permission="circle:comment:tree">
                <a-button
                  type="link"
                  size="small"
                  @click="handleViewPostTree(record)"
                  class="action-btn"
                >
                  <BranchesOutlined />
                </a-button>
              </PermissionButton>

              <PermissionButton permission="circle:comment:delete">
                <a-popconfirm
                  title="确定要删除这条评论吗？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="handleDelete(record)"
                  placement="topRight"
                >
                  <a-button type="link" size="small" danger class="action-btn">
                    <DeleteOutlined />
                  </a-button>
                </a-popconfirm>
              </PermissionButton>
            </div>
          </template>
        </a-table>
      </a-card>
    </div>

    <!-- 评论详情弹窗 -->
    <a-modal
      v-model:open="detailModalVisible"
      title="评论详情"
      width="700px"
      :footer="null"
      :destroy-on-close="true"
    >
      <div v-if="currentComment" class="comment-detail">
        <div class="detail-header">
          <div class="commenter-card">
            <a-avatar :src="getCommenterAvatar(currentComment)" size="large" />
            <div class="commenter-info">
              <h3>{{ getCommenterName(currentComment) }}</h3>
              <div class="commenter-badges">
                <a-tag :color="currentComment.isAnonymous === 1 ? 'orange' : 'blue'">
                  <component
                    :is="currentComment.isAnonymous === 1 ? 'EyeInvisibleOutlined' : 'UserOutlined'"
                  />
                  {{ currentComment.isAnonymous === 1 ? '匿名评论' : '实名评论' }}
                </a-tag>
                <a-tag :color="getStatusColor(currentComment.commentStatus)">
                  <component :is="getStatusIcon(currentComment.commentStatus)" />
                  {{ getStatusText(currentComment.commentStatus) }}
                </a-tag>
              </div>
            </div>
          </div>
        </div>

        <div class="detail-content">
          <!-- 评论内容 -->
          <div class="content-section">
            <h4>评论内容</h4>
            <div class="comment-text">{{ currentComment.content }}</div>
          </div>

          <!-- 评论图片 -->
          <div
            v-if="currentComment.commentImages && currentComment.commentImages.length > 0"
            class="content-section"
          >
            <h4>评论图片</h4>
            <div class="comment-images-grid">
              <a-image-preview-group>
                <a-image
                  v-for="(image, index) in currentComment.commentImages"
                  :key="index"
                  :src="image"
                  :width="100"
                  :height="100"
                  :preview="{ src: image }"
                  class="detail-image"
                />
              </a-image-preview-group>
            </div>
          </div>

          <!-- 关联来源信息 -->
          <div class="content-section">
            <h4>关联来源</h4>
            <div class="source-card">
              <div class="source-title">
                {{
                  currentComment.postTitle ||
                  `${currentComment.sourceType}-${currentComment.sourceId}`
                }}
              </div>
              <div class="source-meta">
                <a-tag :color="currentComment.sourceType === 'post' ? 'blue' : 'green'">
                  {{ currentComment.sourceType === 'post' ? '帖子' : '闲置物品' }}
                </a-tag>
                <a-tag color="purple">ID: {{ currentComment.sourceId }}</a-tag>
              </div>
            </div>
          </div>

          <!-- 隐藏信息 -->
          <div v-if="currentComment.isHidden === 1" class="content-section">
            <h4>隐藏信息</h4>
            <div class="hidden-info">
              <a-alert
                message="该评论已被隐藏"
                :description="currentComment.hiddenReason"
                type="warning"
                show-icon
              />
            </div>
          </div>

          <!-- 互动统计 -->
          <div class="stats-section">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-statistic title="点赞数" :value="currentComment.likeCount" />
              </a-col>
              <a-col :span="8">
                <a-statistic title="回复数" :value="currentComment.replyCount" />
              </a-col>
              <a-col :span="8">
                <a-statistic
                  title="评论时间"
                  :value="formatDateTime(currentComment.createTime)"
                  :value-style="{ fontSize: '14px' }"
                />
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 帖子详情模态框 -->
    <PostDetailModal
      v-model:visible="postDetailModalVisible"
      :source-type="selectedSourceType"
      :source-id="selectedSourceId"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import {
  SearchOutlined,
  EyeOutlined,
  DeleteOutlined,
  BranchesOutlined,
  MessageOutlined,
  SwapOutlined,
  UserOutlined,
  LikeOutlined,
  RiseOutlined,
  ExclamationCircleOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  EyeInvisibleOutlined,
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import type {
  Comment,
  CommentPageParams,
  CommentStatistics,
  CommentStatisticsParams,
} from '../../../types'
import { CommentService } from '../../../api/comment'
import PermissionButton from '../../../components/PermissionButton.vue'
import PostDetailModal from './components/PostDetailModal.vue'
import { debounce } from '../../../utils/debounce'

// 页面状态
const loading = ref(false)
const statsLoading = ref(false)
const detailModalVisible = ref(false)
const postDetailModalVisible = ref(false)
const currentComment = ref<Comment | null>(null)
const selectedSourceType = ref('')
const selectedSourceId = ref(0)

// 统计搜索表单
const statsSearchForm = reactive({
  sourceType: 'post' as string,
  timeRange: undefined as [any, any] | undefined,
})

// 搜索表单
const searchForm = reactive({
  content: '',
  sourceType: undefined as string | undefined,
  commentStatus: undefined as string | undefined,
  isAnonymous: undefined as number | undefined,
  isHidden: undefined as number | undefined,
})

// 表格数据
const tableData = ref<Comment[]>([])

// 统计数据
const statistics = ref<CommentStatistics>({
  commentCount: 0,
  replyCount: 0,
  growthRate: 0,
  commentRiskCount: 0,
})

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条数据`,
})

// 表格列配置
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 60,
    fixed: 'left',
  },
  {
    title: '评论内容',
    key: 'commentContent',
    width: 400,
    slots: { customRender: 'commentContent' },
  },
  {
    title: '评论者',
    key: 'commenter',
    width: 100,
    slots: { customRender: 'commenter' },
  },
  {
    title: '身份',
    key: 'identity',
    width: 80,
    slots: { customRender: 'identity' },
  },
  {
    title: '关联来源',
    key: 'relatedSource',
    width: 200,
    slots: { customRender: 'relatedSource' },
  },
  {
    title: '状态',
    key: 'commentStatus',
    width: 120,
    slots: { customRender: 'commentStatus' },
  },
  {
    title: '互动统计',
    key: 'interaction',
    width: 100,
    slots: { customRender: 'interaction' },
  },
  {
    title: '评论时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 150,
    customRender: ({ text }: { text: string }) => formatDateTime(text),
  },
  {
    title: '操作',
    key: 'action',
    width: 120,
    fixed: 'right',
    slots: { customRender: 'action' },
  },
]

// 格式化增长率
const formatGrowthRate = (rate: number) => {
  if (!rate) return '0%'
  return `${rate > 0 ? '+' : ''}${(rate * 100).toFixed(1)}%`
}

// 获取评论者头像
const getCommenterAvatar = (comment: Comment) => {
  if (comment.isAnonymous === 1) {
    return 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
  }
  return (
    comment.commenter ||
    'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
  )
}

// 获取评论者姓名
const getCommenterName = (comment: Comment) => {
  return comment.commenter || '未知用户'
}

// 获取来源标题
const getSourceTitle = (comment: Comment) => {
  return (
    comment.postTitle ||
    `${comment.sourceType === 'post' ? '帖子' : '闲置物品'}-${comment.sourceId}`
  )
}

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-'
  return dayjs(dateTime).format('YYYY-MM-DD HH:mm')
}

// 获取状态颜色
const getStatusColor = (status: string) => {
  switch (status) {
    case 'published':
      return 'green'
    case 'hidden':
      return 'red'
    case 'deleted':
      return 'default'
    default:
      return 'default'
  }
}

// 获取状态图标
const getStatusIcon = (status: string) => {
  switch (status) {
    case 'published':
      return 'CheckCircleOutlined'
    case 'hidden':
      return 'EyeInvisibleOutlined'
    case 'deleted':
      return 'ClockCircleOutlined'
    default:
      return 'ExclamationCircleOutlined'
  }
}

// 获取状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case 'published':
      return '已发布'
    case 'hidden':
      return '已隐藏'
    case 'deleted':
      return '已删除'
    default:
      return '未知'
  }
}

// 加载统计数据
const fetchStatistics = async () => {
  try {
    statsLoading.value = true

    const params: CommentStatisticsParams = {
      sourceType: statsSearchForm.sourceType,
    }

    // 处理时间范围
    if (statsSearchForm.timeRange && statsSearchForm.timeRange.length === 2) {
      params.beginTime = dayjs(statsSearchForm.timeRange[0]).format('YYYY-MM-DD HH:mm:ss')
      params.endTime = dayjs(statsSearchForm.timeRange[1]).format('YYYY-MM-DD HH:mm:ss')
    }

    const result = await CommentService.getCommentStatistics(params)
    statistics.value = result
  } catch (error) {
    console.error('获取统计数据失败:', error)
    message.error('获取统计数据失败')
  } finally {
    statsLoading.value = false
  }
}

// 统计搜索
const handleStatsSearch = debounce(() => {
  fetchStatistics()
}, 500)

// 重置统计搜索
const handleStatsReset = () => {
  statsSearchForm.sourceType = 'post'
  statsSearchForm.timeRange = undefined
  fetchStatistics()
}

// 加载数据
const fetchData = async () => {
  try {
    loading.value = true

    const params: CommentPageParams = {
      page: pagination.current,
      pageSize: pagination.pageSize,
    }

    if (searchForm.content) params.content = searchForm.content
    if (searchForm.sourceType) params.sourceType = searchForm.sourceType
    if (searchForm.commentStatus) params.commentStatus = searchForm.commentStatus
    if (searchForm.isAnonymous !== undefined) params.isAnonymous = searchForm.isAnonymous
    if (searchForm.isHidden !== undefined) params.isHidden = searchForm.isHidden

    const result = await CommentService.getCommentPage(params)
    tableData.value = result.result
    pagination.total = result.total
  } catch (error) {
    console.error('获取评论列表失败:', error)
    message.error('获取评论列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = debounce(() => {
  pagination.current = 1
  fetchData()
}, 500)

// 重置搜索
const handleReset = () => {
  Object.assign(searchForm, {
    content: '',
    sourceType: undefined,
    commentStatus: undefined,
    isAnonymous: undefined,
    isHidden: undefined,
  })
  pagination.current = 1
  fetchData()
}

// 表格分页变化
const handleTableChange = (pag: any) => {
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
  fetchData()
}

// 查看详情
const handleViewDetail = async (record: Comment) => {
  currentComment.value = record
  detailModalVisible.value = true
}

// 删除评论
const handleDelete = async (record: Comment) => {
  try {
    await CommentService.deleteComment(record.id)
    message.success('删除成功')
    fetchData()
    fetchStatistics() // 刷新统计数据
  } catch (error) {
    console.error('删除评论失败:', error)
    message.error('删除评论失败')
  }
}

// 查看帖子树形结构
const handleViewPostTree = async (record: Comment) => {
  selectedSourceType.value = record.sourceType
  selectedSourceId.value = record.sourceId
  postDetailModalVisible.value = true
}

// 页面初始化
onMounted(() => {
  fetchData()
  fetchStatistics()
})
</script>

<style scoped lang="scss">
.page-container {
  padding: 24px;
}

.stats-search-card {
  margin-bottom: 16px;
  border-radius: 8px;

  .stats-search-form {
    .ant-form {
      .ant-form-item {
        margin-bottom: 16px;
        margin-right: 24px;

        &:last-child {
          margin-right: 0;
          margin-bottom: 0;
        }

        .ant-form-item-label {
          font-weight: 500;
          color: #333;

          > label {
            font-size: 14px;
          }

          .ant-form-item-required {
            &::before {
              color: #ff4d4f;
            }
          }
        }

        .ant-form-item-control {
          .ant-select .ant-select-selector,
          .ant-picker {
            border-radius: 6px;
            border: 1px solid #d9d9d9;
            transition: all 0.3s ease;

            &:hover {
              border-color: #40a9ff;
            }

            &:focus,
            &.ant-select-focused .ant-select-selector,
            &.ant-picker-focused {
              border-color: #1890ff;
              box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            }
          }

          .ant-btn {
            border-radius: 6px;
            font-weight: 500;
            height: 32px;
            padding: 4px 15px;

            &.ant-btn-primary {
              background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
              border: none;
              box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);

              &:hover {
                background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
                box-shadow: 0 4px 8px rgba(24, 144, 255, 0.4);
                transform: translateY(-1px);
              }

              &:disabled {
                background: #f5f5f5;
                transform: none;
                box-shadow: none;
              }
            }

            &:not(.ant-btn-primary) {
              border: 1px solid #d9d9d9;
              background: #fff;

              &:hover {
                border-color: #40a9ff;
                color: #40a9ff;
              }
            }
          }
        }
      }
    }
  }
}

.stats-cards {
  margin-bottom: 24px;

  .stat-card {
    border-radius: 8px;
    overflow: hidden;

    :deep(.ant-card-body) {
      padding: 20px;
    }
  }

  .stat-content {
    position: relative;

    .stat-number {
      font-size: 28px;
      font-weight: bold;
      color: #1d1d1f;
      line-height: 1;
      margin-bottom: 8px;
    }

    .stat-label {
      font-size: 14px;
      color: #666;
    }

    .stat-icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;

      &.total {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      &.reply {
        background: linear-gradient(135deg, #ffa726 0%, #fb8c00 100%);
      }

      &.risk {
        background: linear-gradient(135deg, #fc466b 0%, #3f5efb 100%);
      }

      &.growth {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
      }
    }
  }
}

.search-form {
  margin-bottom: 24px;
  padding: 24px 24px 16px 24px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #e8e8e8;

  .ant-form {
    .ant-form-item {
      margin-bottom: 16px;
      margin-right: 24px;

      &:last-child {
        margin-right: 0;
        margin-bottom: 0;
      }

      .ant-form-item-label {
        font-weight: 500;
        color: #333;

        > label {
          font-size: 14px;
        }
      }

      .ant-form-item-control {
        .ant-input,
        .ant-select .ant-select-selector {
          border-radius: 6px;
          border: 1px solid #d9d9d9;
          transition: all 0.3s ease;

          &:hover {
            border-color: #40a9ff;
          }

          &:focus,
          &.ant-select-focused .ant-select-selector {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
          }
        }

        .ant-btn {
          border-radius: 6px;
          font-weight: 500;
          height: 32px;
          padding: 4px 15px;

          &.ant-btn-primary {
            background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
            border: none;
            box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);

            &:hover {
              background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
              box-shadow: 0 4px 8px rgba(24, 144, 255, 0.4);
              transform: translateY(-1px);
            }
          }

          &:not(.ant-btn-primary) {
            border: 1px solid #d9d9d9;
            background: #fff;

            &:hover {
              border-color: #40a9ff;
              color: #40a9ff;
            }
          }
        }
      }
    }
  }
}

.comment-content-cell {
  .normal-comment {
    .comment-text {
      line-height: 1.5;
      word-break: break-word;
      cursor: default;
      transition: color 0.2s ease;

      &[title]:not([title='']) {
        cursor: help;

        &:hover {
          color: #1890ff;
        }
      }
    }
  }

  .reply-comment {
    .reply-header {
      font-size: 12px;
      color: #666;
      margin-bottom: 4px;
      line-height: 1.4;

      &::before {
        content: '↳ ';
        color: #1890ff;
        font-weight: bold;
      }
    }

    .reply-content {
      line-height: 1.5;
      word-break: break-word;
      cursor: default;
      transition: color 0.2s ease;
      padding-left: 12px;
      border-left: 2px solid #e6f7ff;

      &[title]:not([title='']) {
        cursor: help;

        &:hover {
          color: #1890ff;
        }
      }
    }
  }
}

.commenter-name {
  font-weight: 500;
  color: #333;
}

.related-source {
  .source-title {
    font-weight: 500;
    margin-bottom: 4px;
    line-height: 1.4;

    .source-link {
      color: #1890ff;
      cursor: pointer;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .source-type {
    font-size: 12px;
  }
}

.interaction-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;

  .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #666;
  }
}

.action-buttons {
  display: flex;
  gap: 4px;
  justify-content: flex-start;
  align-items: center;

  .action-btn {
    padding: 0 4px;
    height: 24px;
    line-height: 22px;
    min-width: 24px;

    .anticon {
      font-size: 12px;
    }
  }
}

.comment-detail {
  .detail-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;

    .commenter-card {
      display: flex;
      align-items: center;
      gap: 16px;

      .commenter-info {
        h3 {
          margin-bottom: 8px;
          font-size: 18px;
        }

        .commenter-badges {
          display: flex;
          gap: 8px;
        }
      }
    }
  }

  .detail-content {
    .content-section {
      margin-bottom: 24px;

      h4 {
        margin-bottom: 12px;
        color: #333;
        font-size: 16px;
      }

      .comment-text {
        padding: 12px 16px;
        background: #fafafa;
        border-radius: 6px;
        line-height: 1.6;
      }

      .comment-images-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .detail-image {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 4px;
      }

      .source-card {
        padding: 16px;
        background: #fafafa;
        border-radius: 6px;

        .source-title {
          font-weight: 600;
          margin-bottom: 8px;
          color: #1890ff;
        }

        .source-meta {
          display: flex;
          gap: 8px;
        }
      }

      .hidden-info {
        padding: 12px 16px;
        background: #f6ffed;
        border: 1px solid #b7eb8f;
        border-radius: 6px;
      }
    }

    .stats-section {
      padding: 16px 0;
      border-top: 1px solid #f0f0f0;
    }
  }
}

.post-tree-container {
  .post-info-card {
    margin-bottom: 24px;
    padding: 16px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    h3 {
      margin-bottom: 8px;
      font-size: 18px;
    }

    .post-meta {
      display: flex;
      gap: 8px;
    }
  }

  .comment-tree-section {
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      h4 {
        font-size: 16px;
      }

      .ant-button {
        padding: 0;
      }
    }

    .tree-loading {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16px;
    }

    .comment-tree {
      .comment-node {
        margin-bottom: 8px;
      }
    }

    .empty-tree {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16px;
    }
  }
}

.mobile-drawer {
  .post-tree-container {
    .post-info-card {
      margin-bottom: 16px;
    }
  }
}
</style>